<template>
  <div class="ano-home">
    <AnoHeader />

    <AnoNav />

    <div class="home-banner">
      <el-carousel height="650px">
        <el-carousel-item v-for="item in 3" :key="item">
          <img class="ban-img" :src="getImgUrl(item)" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="home-products">
      <div class="products-hd">定制T恤和炫酷的团体风格</div>
      <div class="products-bd">
        <ul class="products-list">
          <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product1.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
           <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product2.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
           <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product3.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
          <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product1.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
           <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product2.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
           <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product3.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
          <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product1.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
           <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product2.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
           <li class="item" @click="goProducts">
            <img src="../../assets/imgs/product3.jpg" alt="">
            <div class="item-fd">
              <div class="t1">T恤</div>
              <div class="t2">穿着色彩缤纷的定制T 恤与您的团队一起闪耀</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <AnoFooter />
  </div>
</template>

<script>
import AnoHeader from '@/components/anoHeader'
import AnoNav from '@/components/anoNav'
import AnoFooter from '@/components/anoFooter'

export default {
  name: "home",
  components: {
    AnoHeader,
    AnoNav,
    AnoFooter
  },
  data() {
    return {
      
    }
  },
  methods: {
    goProducts() {
      this.$router.push({name: 'products'})
    },
    handleSelect(item) {
      this.$router.push({name: item.path})
    },
    getImgUrl(item) {
      return require('../../assets/imgs/banner/b' +  item + '.png')
    }
  }
};
</script>

<style lang="less" scoped>
.home-banner {
  .el-carousel {
    height: 630px;
    overflow: hidden;
  }
  .el-carousel__item {
    height: 630px;
    overflow: hidden;
  }
  .ban-img {
    width: 1900px;
    height: auto;
  }
}
.home-products {
  margin-top: 20px;
  .products-hd {
    text-align: center;
    line-height: 40px;
    font-size: 40px;
    font-weight: 100;
    font-family: SharpSans, Helvetica, Arial, "Trebuchet MS", sans-serif;
    padding: 25px 0;
  }
  .products-list {
    display: flex;
    flex-wrap: wrap;
    max-width: 1400px;
    justify-content: space-between;
    margin: 0 auto;
    .item {
      width: 400px;
      margin-bottom: 25px;
      cursor: pointer;
      user-select: none;
      img {
        width: 400px;
        height: 400px;
      }
    }
    .item-fd {
      margin-top: 5px;
      .t2 {
        font-size: 14px;
         margin-top: 2px;
      }
    }
  }
}
</style>
